<template>
  <div :id="id" :style="style"></div>
</template>
<script>
import echarts from 'echarts/lib/echarts';
	import "echarts/lib/chart/pie";
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
export default {
  name: "Chart",
  data() {
    return {
      //echarts实例
      chart: ""
    };
  },
   watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
            this.init();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },
  props: {
    //父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    option: {
      type: Object,
      //Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      //使用闭包保证一个vue实例拥有自己的一份props
      default() {
        return {
    backgroundColor:'rgb(255,255,255,0)',
    title: {
        text: '本月收支',
        left: 'center',
		show: false,
        top: 0,
        textStyle: {
            color: '#ccc'
        }
    },
	legend: {
		data: ['收入', '支出'],
		top: '15%',
		textStyle:{//图例文字的样式
		            color:'#ccc',
		            fontSize:16
		        }
	},

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
	grid: {
						top: '6%',
						containLabel: true
					},

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '收入',
            type: 'pie',
             radius : '55%',
            center: ['20%', '50%'],
            data: [
                {value: 5335, name: '基金'},
                {value: 4310, name: '股票'},
                {value: 3274, name: '期货'},
                {value: 2235, name: '黄金'},
                {value: 1400, name: '保险'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
				     normal: {
				          textStyle: {
				               color: 'rgba(255, 255, 255, 1)',  // 改变标示文字的颜色
				          }
				}
            },
            labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.6)'
                },
                smooth: 0.2,
                length: 5,
                // length2: 10
            },
            itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: "rgba(196,107,221,0.8)" },
				  { offset: 0.2, color: "rgba(196,107,221,0.5)" },
				  { offset: 1, color: "rgba(196,107,212,0.2)" }
				]),
               // color: function(params) {
               //            //自定义颜色
               //            var colorList = [
               //            "rgba(16,107,211,0.8)","rgba(156,17,211,0.8)","rgba(156,107,21,0.8)","rgba(16,107,111,0.8)","rgba(156,207,211,0.8)"
               //            ];
               //            return colorList[params.dataIndex]
               //        },
				borderRadius:55,
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        },
		{
		    name: '支出',
		    type: 'pie',
		     radius : '55%',
		    center: ['75%', '60%'],
		    data: [
		        {value: 5135, name: '基金'},
		        {value: 4110, name: '股票'},
		        {value: 3374, name: '期货'},
		        {value: 2135, name: '黄金'},
		        {value: 1188, name: '保险'}
		    ].sort(function (a, b) { return a.value - b.value; }),
		    roseType: 'radius',
		    label: {
				     normal: {
				          textStyle: {
				               color: 'rgba(255, 255, 255, 1)',  // 改变标示文字的颜色
				          }
				}
		    },
		    labelLine: {
		        lineStyle: {
		            color: 'rgba(255, 255, 255, 0.6)'
		        },
		        smooth: 0.1,
		        length: 5,
		        // length2: 10
		    },
		    itemStyle: {
		       // color: function(params) {
		       //            //自定义颜色
		       //            var colorList = [
		       //            '#FE8463', 'red', 'green','#07f8ba','#f58a8a',
		       //            ];
		       //            return colorList[params.dataIndex]
		       //        },
					  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					    { offset: 0, color: "rgba(196,37,21,0.8)" },
					    { offset: 0.2, color: "rgba(196,37,21,0.5)" },
					    { offset: 1, color: "rgba(196,37,21,0.2)" }
					  ]),
				borderRadius:55,
		        shadowBlur: 200,
		        shadowColor: 'rgba(0, 0, 0, 0.5)'
		    },
		
		    animationType: 'scale',
		    animationEasing: 'elasticOut',
		    animationDelay: function (idx) {
		        return Math.random() * 200;
		    }
		}
    ]
        };
      }
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      };
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  }
};
</script>